<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i>互动中心</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
  
        <div class="handle-box">
<el-row>
  <el-col :span="5" v-for="(item, index) in interactCenter"   :offset='index%4==0?0:1'>
    <el-card :body-style="{ padding: '0px' }" style="margin-bottom:20px;">
      <div style="padding: 14px;">
        <div class="u_list_item">  
        <img :src="item.in_img" class="image" style="width:100%;border-radius:5px;">
        <span>{{item.in_name}}</span>
        </div>
        <div>
         <el-button v-for='item_auth in item.auth' type="success" plain class="btn-info auth_item">{{item_auth}}</el-button>
        </div>
        <div class="bottom clearfix">
           <el-button type="text" @click="editBaseInfo(item)" class="button">基本信息</el-button>
           <el-button type="text" @click="editRules(item)" class="button">互动规则</el-button>       
           <el-button type="text" @click="showQcode(item)" class="button">预览效果</el-button> 
        </div>
      </div>
    </el-card>
  </el-col>
</el-row>
<p v-if='interactCenter.length===0' class="info_title">暂时无互动内容</p>
</div>


  <el-dialog title="基本信息" :visible.sync="editBInfo">
  <el-form label-width="80px">
    <el-form-item label="互动名称:">
    <el-input v-model="unewdata.in_name" auto-complete="off"  placeholder="请输入互动名称" class="handle-input"></el-input>
    </el-form-item>

     <el-form-item label="演示地址:">
      <el-input v-model="unewdata.in_url" auto-complete="off"  type="url" placeholder="在线演示地址" class="handle-input"></el-input>
    </el-form-item>
    <el-form-item label="上线时间:">
<el-date-picker
      v-model="unewdata.on_time"
      type="datetime"
      placeholder="请设置上线时间">
    </el-date-picker>
    </el-form-item>

        <el-form-item label="下线时间:">
<el-date-picker
      v-model="unewdata.leave_time"
      type="datetime"
      placeholder="请设置下线时间">
    </el-date-picker>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
     <el-button type="default" @click="closeEdit">清空</el-button>
    <el-button type="danger" @click="updateBaseinfo">保存</el-button>
  </div>
</el-dialog>



<!-- 互动规则 -->
<el-dialog title="互动规则" :visible.sync="editRulesInfo">
  <el-form label-width="120px">
    <el-form-item v-for="item in rules" :label="item.name+':'">
    <el-input v-model="item.value" auto-complete="off"  :placeholder="'请设置'+item.name" class="handle-input"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
     <el-button type="default" @click="closeRuleInfo">清空</el-button>
    <el-button type="danger" @click="updateRuleInfo">保存</el-button>
  </div>
</el-dialog>
<!-- 互动规则 -->


<!-- 互动二维码 -->
<el-dialog :title="qcodeConfig.title" :visible.sync="qcodeShow"  style="text-align:center;">
   <vue-qr :config="qcodeConfig"></vue-qr>
</el-dialog>
<!-- 互动二维码 -->
      
      
    </div>
</template>

<script>
import * as rpConfig from '../../../rpConfig/constant'
import { HttpReq } from '../../service/server'
import VueQr from 'vue-qart'
var Server = new HttpReq()
export default {
    components: {VueQr},
    data() {
        return {
            uploadURI: rpConfig.API_URI + '/Helpapi/uploadImg',
            editBInfo: false,
            editRulesInfo:false,
            qcodeShow:false,
            dialogImageUrl: '',
            dialogVisible: false,
            interactCenter: [],
            typeCenter: [],
            authArr: {},
            rules:[],
            unewdata: {
                in_id: 0,
                in_name: '',
                in_url: '',
                on_time: '',
                leave_time: ''
            },
            qcodeConfig:{value:'',imagePath:'../../../static/img/logo_int.png',filter: 'color','title':''}
        }
    },
    created() {
        this.getData()
    },
    computed: {
        userAuth() {
            return 'test'
        }
    },
    methods: {
        handleAvatarSuccess(res) {
            if (res.code != 200) {
                this.$message.error(res.msg)
            } else {
                this.unewdata.showavatar = res.data.url
                this.unewdata.avatar = res.data.saveUrl
            }
        },
        getData() {
            let self = this
            Server._POST(rpConfig.API_URI + '/interactcenter.Index/getInteractCenter', {}, function(
                res
            ) {
                self.interactCenter = res.data
            })
        },
        clearInfo() {
            this.unewdata = {
                mid: 0,
                name: '',
                pwd: '',
                repwd: '',
                remark: '',
                auth: []
            }
        },
        addNewAccount() {
            this.editMinfo = true
        },
        closeEdit() {
            this.clearInfo()
            this.editMinfo = false
        },
        editBaseInfo(uitem) {
        
            this.editBInfo=true
            this.unewdata['in_id']=uitem.in_id
            this.unewdata['in_name']=uitem.in_name
            this.unewdata['in_url']=uitem.in_url
            this.unewdata['on_time']=rpConfig.getTime(uitem.on_time,'S')
            this.unewdata['leave_time']=rpConfig.getTime(uitem.leave_time,'S')
        },
        closeRuleInfo(){
            for(let i=0;i<this.rules.length;i++){

                this.rules[i]['value']=''
            }
        },
        editRules(uitem){
            this.rules=[]
            let rules=JSON.parse(eval('\''+uitem.in_rule+'\''))
            for(let i of rules){
                this.rules.push(i)
            }
            this.unewdata['in_id']=uitem.in_id
            this.editRulesInfo=true
        },
        updateBaseinfo(){
            let self = this
            Server._POST(
                rpConfig.API_URI + '/interactcenter.Index/updateInteractInfo',
                self.unewdata,
                function(data) {
                    self.$message.success(data.msg)
                    setTimeout(()=>{
                        self.getData()
                        self.editBInfo=false
                    },2000)
                }
            )
        },
        updateRuleInfo(){

            let self = this
            Server._POST(
                rpConfig.API_URI + '/interactcenter.Index/updateInteractRules',
                {'rules':self.rules,'in_id':self.unewdata.in_id},
                function(data) {
                    //console.log(data)
                    self.$message.success(data.msg)
                    setTimeout(()=>{
                        self.getData()
                        self.editRulesInfo=false
                    },2000)
                }
            )

        },
        showQcode(row){
            this.qcodeConfig.value=row.in_url
            this.qcodeConfig.title='打开微信扫码查看('+row.in_name+')'
            this.qcodeShow=true 
        }
    }
}
</script>

<style scoped>

.info_title{
  text-align: center;
  padding:20px;
}
.a_item {
  display: inline-block;
  margin: 5px;
}
.a_item label {
  margin-right: 5px;
}
.auth_item {
  margin: 5px;
}
.u_list_item {
  margin-bottom: 10px;
}
.m_avatar {
  display:block;
  
  width:100%;  
  vertical-align: middle;
  border-radius: 5px;
}
.btn-info {
  padding: 5px 10px;
}
.handle-box {
  margin-bottom: 20px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9c2;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.handle-select {
  width: 120px;
}
.handle-input {
  width: 300px;
  display: inline-block;
}
</style>